<script>
	import ForceGraph3D from '3d-force-graph';
	import { onMount } from 'svelte';
	// import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
	let width, height;

	const distance = 1000;

	const gData = {
		nodes: [
			{
				id: 1,
				label: '我',
				type: 1,
				size: 30
			},
			{
				id: 2,
				label: '喜欢',
				type: 2,
				size: 35
			},
			{
				id: 3,
				label: '你',
				type: 3,
				size: 30
			}
		],
		links: [
			{
				source: 1,
				target: 2,
				label: '拥有',
				weight: 5
			},
			{
				source: 2,
				target: 3,
				label: '好心',
				weight: 10
			}
		]
	};
	let demo;
	onMount(() => {
		const graphdemo = document.getElementById('3d-graph1');
		width = innerWidth;

		console.log(width, height);
		demo = ForceGraph3D({ controlType: 'orbit' });

		// demo(graphdemo); .backgroundColor('rgba(147,197,253,0.1)');
		demo(graphdemo)
			.width(width - width / 5 - 50)
			.height(height)
			.cooldownTicks(100)
			.cameraPosition({ z: distance })
			.onNodeDragEnd((node) => {
				node.fx = node.x;
				node.fy = node.y;
				node.fz = node.z;
			})
			.backgroundColor('rgba(0,0,0,0)')

			.showNavInfo(false)
			.graphData(gData)
			.nodeRelSize(15)
			.nodeAutoColorBy('group')
			.linkAutoColorBy((d) => gData.nodes[d.source].group)
			.linkOpacity(0.8)
			.linkDirectionalParticles('value')
			.linkDirectionalParticleSpeed((d) => d.value * 0.001)
			.linkDirectionalArrowLength(8)
			.linkDirectionalArrowRelPos(1)
			.linkCurvature(0.25)
			.nodeOpacity(0.9);

		// fit to canvas when engine stops
		// demo.onEngineStop(() => demo.zoomToFit(800));
		// let angle = 0;
		// setInterval(() => {
		// 	demo.cameraPosition({
		// 		x: distance * Math.sin(angle),
		// 		z: distance * Math.cos(angle)
		// 	});
		// 	angle += Math.PI / 600;
		// }, 10);
	});
	// function resetwindows() {
	// 	({ width } = demo);
	// }
</script>

<!-- <svelte:window on:resize={resetwindows} /> -->
<div id="3d-graph1" />
